<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in swipeItems" :key="item.id">
                <img :src="item.imgUrl">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { getApi } from "@/util/api.js";
    export default {
        name: "Swipe",
        data() {
            return {
            swipeItems: [],
            };
        },
        mounted() {
            this.getSwipeItems();
        },
        methods: {
            getSwipeItems() {
            let url = "https://d.app3c.cn/mcm/api/TypeSwipe/";
            getApi(url)
                .then((res) => {
                for (let i = 0; i < res.data.length; i++) {
                    this.swipeItems.push({
                    id: res.data[i].id,
                    newsId: res.data[i].news_id,
                    imgUrl: res.data[i].img,
                    });
                }
                })
                .catch((err) => {
                console.log(err);
                });
            },
            goto(id) {
            this.$router.push({ name: "detail", params: { id } });
            },
        },
    }
</script>

<style lang="scss" scoped>
  ::v-deep .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img{
        width: 98%;
        height: 30vw;
        border-radius: 3%;
    }
  }
  img{
      width: 100%;
      height: 150%;
      height: 40vw;
      padding-left: 1vw;
  }
</style>